<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>音乐排行榜</title>
		<style type="text/css">
			/* 1 定义基础样式，清楚浏览器默认样式 */
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				outline: none;
			}

			/*
			2整体排行榜歌曲控制模块
			 repeating-radial-gradient
			创建一个从原点辐射的重复渐变组成的<image> 。
			它类似于radial-gradient 并且采用相同的参数，
			但是它会在所有方向上重复颜色，以覆盖其整个容器
			https://www.html.cn/book/css/values/image/repeating-radial-gradient().htm
			*/
			.bg {
				width: 600px;
				height: 550px;
				background-image: repeating-radial-gradient(circle at 50% 50%, #333, #000 1%);
				margin: 50px auto;
				padding: 40px;
				border-radius: 50%;
				padding-top: 50px;
				border: 10px solid #ccc;
			}

			/*制作唱片样式*/
			/* 3 设置歌曲排名部分样式 */
			ul {
				width: 372px;
				height: 530px;
				background: #fff;
				border-radius: 50%;
				box-shadow: 15px 15px 12px #000000;
				margin: 0 auto;
			}

			ul li {
				width: 372px;
				height: 55px;
				background: #504d58 url(images/yinfu.png) no-repeat 70px 20px;
				margin-bottom: 2px;
				font-size: 18px;
				color: #076BBC;
				line-height: 55px;
				text-align: center;
				font-family: "微软雅黑";
			}

			/*
		    4 设置需要当都控制的部分
		   */
			ul .tp {
				width: 372px;
				height: 247px;
				background: #fff;
				background-image: url(images/yinyue.jpg), url(images/wenzi.jpg);
				background-repeat: no-repeat;
				background-position: 87px 16px, 99px 192px;
				border-radius: 30px 30px 0 0;
			} 

			ul .yj {
				border-radius: 0 0 30px 30px;
			}
		</style>
	</head>
	<body>
		<div class="bg">
			<ul>
				<li class="tp"></li>
				<li>vnessa—constance</li>
				<li>dogffedrd—seeirtit</li>
				<li>dsieirif—constance</li>
				<li>wytuu—qeyounted</li>
				<li class="yj">qurested—conoted</li>
			</ul>
		</div>
	</body>
</html>
